<template>
  <view>
<!--    <uni-notice-bar :text="noticeText" :mode="noticeMode" />-->

<!--    <image class="logo" src="@/static/logo.png"></image>-->
<!--    <view class="text-area">-->
<!--      <text class="title">AI图片识别</text>-->

<!--&lt;!&ndash;      <text>AI图片识别</text>&ndash;&gt;-->

<!--    </view>-->
    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
                 @scrolltolower="lower" >
      <view class="contrast bg-white flex align-center justify-between padding-xs">
        <view class="box">
          <view class="title text-bold text-black">上传图片:</view>
          <view class="box_img flex align-center justify-center" @tap="uploadImage">
            <image v-if="imageFilepath.length > 0" :src="imageFilepath"></image>
            <uni-icons v-else class="text-grey" type="camera" size="30"></uni-icons>
          </view>
        </view>
        <view class="box">
          <view class="title text-bold text-black">结果图片:</view>
          <view class="box_img flex align-center justify-center">
            <image v-if="plantData.imageUrl" :src="plantData.imageUrl"></image>
            <view v-else>结果</view>
          </view>
        </view>
      </view>
      <view>
        <uni-section title="详细信息" type="line" class="padding-bottom">
          <uni-card :is-shadow="false">
            <text v-if="plantData.description" class="uni-body">{{plantData.description}}</text>
            <text v-else class="uni-body">无</text>
          </uni-card>
        </uni-section>
      </view>
      <view class="cu-tabbar-height margin-top"></view>
<!--    <button type="primary" @tap="uploadImage">上传图片</button>-->
<!--    &lt;!&ndash;图片预览&ndash;&gt;-->
<!--    <button v-if="imageFilepath.length>0" @tap="previewImage" >预览上传图片</button>-->
<!--    &lt;!&ndash;返回的文本&ndash;&gt;-->
<!--    <view>-->
<!--      <text>{{resultString}}</text>-->
<!--    </view>-->

    </scroll-view>
  </view>
</template>

<script>
import {uploadFlower} from "../api/system/user";
import UniNoticeBar from "../uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue";
import UniSection from "../components/uni-section/uni-section.vue";

export default {
  components: {UniSection, UniNoticeBar},
    onLoad: function() {
    },

    data() {
      return {
        noticeText: '这是一条通知',
        noticeMode: 'scrollable',
        scrollTop:0,
        webviewStyles: {
          progress: {
            color: '#FF3333'
          }
        },
        //鉴定结果字符串
        resultString: "鉴定结果",
        imageFilepath:[],
        baikeUrl:"",
        plantData:{},

      }
    },
    methods:{
      lower: function(e) {
        console.log(e)
      },
      //预览图片
      previewImage(){
        uni.previewImage({
          urls: [this.imageFilepath],
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function (data) {
              console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
            },
            fail: function (err) {
              console.log(err.errMsg);
            }
          }
        })

      },
      //上传图片
      uploadImage(){
        let that = this;
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          //需要添加原生相机和相册两种来源
          sourceType: ['album','camera'],
          success: function(res) {
            console.log(res);
            let imagePath = res.tempFilePaths[0];
            that.imageFilepath = imagePath;
            console.log("开始上传图片")
            uploadFlower({
              filePath:imagePath ,
            }).then(res => {
              console.log(res);
              console.log(res.data);
              that.plantData = res.data;
              //data.baikeUrl
              that.baikeUrl = res.data.baikeUrl;
              //that.resultString = JSON.stringify(res.data);
              that.resultString = res.data.description;
            })
          }
        });


      }
    }
  }
</script>

<style lang="less" scoped>
  .scroll-Y {
    width: 100%;
    //display: flex;
    //flex-direction: column;
    //align-items: center;
    //justify-content: center;
    //background: #00afff;
    background-color: #fff;
    height: calc(100vh - 96px);
  }

  /*.logo {*/
  /*  height: 200rpx;*/
  /*  width: 200rpx;*/
  /*  !*margin-top: 200rpx;*!*/
  /*  margin-left: auto;*/
  /*  margin-right: auto;*/
  /*  margin-bottom: 50rpx;*/
  /*}*/

  /*.text-area {*/
  /*  display: flex;*/
  /*  justify-content: center;*/
  /*}*/

  /*.title {*/
  /*  font-size: 36rpx;*/
  /*  color: #8f8f94;*/
  /*}*/
  .contrast{
    width: 100%;
    height: 340rpx;
    .box{
      width: 49%;
      height: 100%;
      .title{
        //height: 10%;
      }
      .box_img{
        width: 100%;
        height: 300rpx;
        border: 1px solid #ccc;
        box-sizing: border-box;
        padding: 2px;
        border-radius: 2px;

        image{
          width: 100%;
          height: 100%;
          border-radius: 2px;

        }
      }


    }

  }



</style>
